
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Swiper demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/animate.css">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/jquery-1.7.2.min.js"></script>

    <!-- Demo styles -->
    <style>
    html, body {
        position: relative;
        width: 100%;
        height: 100%;
    }
    img{ max-width: 100%; }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        background: url(img/bg.jpg);
        background-size: 100% 100%;
    }
    .swiper-slide{ width: 100%;height: 100%;}
    .swiper-slide {
        text-align: center;
        font-size: 18px;

        /* Center slide text vertically */
        
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        text-align: center;
        transition: 1s;
        position: relative;
        overflow: hidden;
    }

    /*---------第一屏----------------*/
    .slide1 img{ width: 100%;display: block; }
    .slide1 .pic1{ margin: 40px 0 10px 0;-webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
     transition: 1s;
    }
    .swiper-slide-active .pic1{ 
        -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
     }
    .slide1 .pic2{ opacity: 0;}
    .swiper-slide-active .pic2{ opacity: 1;transition: 4s; }

    .slide1 .pic3{ margin-top: 80px;-webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%;
    transform:rotateX(10deg) rotateZ(-180deg);
    }
    .swiper-slide-active .pic3{ 
        transform:rotateX(0deg) rotateZ(0deg);
        transition: 1.2s 1s;
     }
    .swiper-slide p{ position: relative; }
    .slide1 .pic4{ position: absolute;top: -200%;left: 0;}
    .swiper-slide-active .pic4{ animation: bounceInDown 4s; top: 0;transition: 0.5s 2s;}
    .slide1 .pic5{ position: absolute;bottom: -255px; }
    .swiper-slide-active .pic5{ bottom: 60px;transition: 1s 3s; }
    /*-------第二屏--------*/
    .slide2 .pic6{ margin:20px 0 30px 0; }
    .swiper-slide-active .pic6{ animation:bounceInDown 0.5s; }
    .slide2 .pic7{ opacity: 0 ;}
    .swiper-slide-active .pic7{ opacity: 1;transition: 1s 0.6s;}
    .slide2 .pic8{ margin-top: 60px;transform: scale(0); }
    .swiper-slide-active .pic8{ transform: scale(1);transition: 0.35s 1.1s; }
    /*----------第三屏-----------*/
    .slide3 .pic9{ margin: 30px 0 40px 0; }
    .swiper-slide-active .pic9{ animation:bounceInDown 0.5s; }
    .slide3 .pic10{ transform: scale(0);}
    .swiper-slide-active .pic10{ transform: scale(1);transition: 1s 0.6s;}
    .slide3 p{ margin-top: 70px; position: relative;}
    .slide3 .pic11{opacity: 0 }
    .swiper-slide-active .pic11{position: absolute;left: 0; bottom: 0; animation: bounceInLeft 1s 1.1s;transition-delay:2s;opacity: 1 ;}
    .slide3 .pic12{ opacity: 0 }
    .swiper-slide-active .pic12{ animation: bounceInRight 0.5s 2.1s; transition-delay:2.4s;opacity: 1}

    /*----------第四屏-------------*/
    .slide4 .pic13{ position: relative;top: -30px; }
    .swiper-slide-active .pic13{ transition: 1s;top: 35px;}
    .slide4 .pic14{ margin-top: 90px;opacity: 0; }
    .swiper-slide-active .pic14{ animation:zoomInLeft 1s 1s;transition-delay:2s;opacity: 1; }
    

    .next{ position: absolute;bottom: 0;left: 50%;margin-left: -17px; animation:nextmove 1s linear 0.5s infinite;}
    .next img{ max-width: 30px; }
    @keyframes nextmove{
        form{ opacity: 1;bottom: 0; }
        to{ opacity: 0;bottom: 15px; }
    }
    @media (min-width: 1080px){
        .slide1 img{ max-width: 640px; margin: 0 auto;}
        .slide1 img:nth-child(1),.slide1 img:nth-child(2),.slide1 img:nth-child(4){ margin-left: 320px; }
        .swiper-slide-active .pic11{left: 50%;margin-left: -320px;}
    }
    </style>
</head>
<body>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide slide1">
                <img class="pic1" src="img/bonus_01.png" alt="">
                <img class="pic2" src="img/bonus_02.jpg" alt="">
                <p><img class="pic3" src="img/001.png" alt="">
                    <img class="pic4" src="img/002.png" alt="">
                </p>
                <img class="pic5" src="img/003.png" alt="">
            </div>
            <div class="swiper-slide slide2">
                <img class="pic6" src="img/004.png" alt="">
                <img class="pic7" src="img/005.png" alt="">
                <img class="pic8" src="img/006.png" alt="">
            </div>
            <div class="swiper-slide slide3">
                <img class="pic9" src="img/007.png" alt="">
                <img class="pic10" src="img/009.png" alt="">
                <p><img class="pic11" src="img/008.png" alt="">
                   <img class="pic12" src="img/010.png" alt=""> 
                </p>
            </div>
            <div class="swiper-slide slide4">
                <img class="pic13" src="img/001.jpg" alt="">
                <img class="pic14" src="img/002.jpg" alt="">
            </div>
        </div>
        <div class="next">
            <img src="img/arrow.png" alt="">
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <!-- Swiper JS -->
    <script src="js/swiper.jquery.min.js"></script><!-- 加载插件js代码 -->

    <!-- Initialize Swiper -->
    <script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction:'vertical',
        loop:'true',
        mousewheelControl : true

    });
    </script>
</body>
</html>